/*
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-06-06 15:03:23
 * @LastEditors: zhangxiang
 * @LastEditTime: 2022-11-30 10:55:52
 * @Description: cover some element-ui styles
 * 
 */

$color: #0091ff; // 默认颜色
$colorFocus: #027dec; // 聚焦颜色
$colorDanger: #f66173; // danger颜色

// 覆盖 breadcrumb
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

// 覆盖 el-upload
.el-upload {
  input[type="file"] {
    display: none !important;
  }
}
.el-upload__input {
  display: none;
}

// 覆盖 el-dialog
// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

// 覆盖 el-upload
// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// 覆盖 el-dropdown
.el-dropdown-menu {
  a {
    display: block;
  }
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

// 覆盖 el-link
.el-link.el-link--primary {
  color: $color;

  &:hover {
    color: $colorFocus;
  }
}

// 覆盖 el-tabs
.el-tabs__item {
  &:hover {
    color: $colorFocus; // modify el-tabs color
  }
}
.el-tabs__item.is-active {
  color: $color;
}
.el-tabs__active-bar {
  background-color: $color;
}

// 覆盖 el-radio
.el-radio__input.is-checked + .el-radio__label {
  color: $color; // modify el-radio color
}
.el-radio__input.is-checked .el-radio__inner {
  background: $color;
  border-color: $color;
}
.el-radio-button__inner {
  &:hover {
    color: $color;
  }
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: $color;
  border-color: $color;
}

// 覆盖 el-checkbox
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: $color; // modify el-checkbox color
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: $color;
  border-color: $color;
}

// 覆盖 el-select
.el-select .el-input__inner:focus {
  border-color: $color;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: $color;
}
.el-select-dropdown__item.selected {
  color: $color;
}

// 覆盖 el-button
.el-button--default {
  // 默认样式
  &:hover {
    background: #ecf0ff; // modify el-button background
    border-color: $color; // modify el-button border-color
    color: $color; // modify el-button color
  }
  &:focus {
    background: #ecf0ff;
    border-color: $color;
    color: $color;
  }
}
.el-button--danger {
  // danger样式
  background-color: $colorDanger;
  border-color: $colorDanger;
}
.el-button--text {
  // 文字按钮样式
  color: $color;
  &:hover {
    color: $colorFocus;
  }
  &:focus {
    color: $colorFocus;
  }
}
.el-button--primary {
  // 主按钮
  background: $color;
  border-color: $color;
  color: #fff;

  &:hover {
    background: $colorFocus;
    border-color: $colorFocus;
    color: #fff;
  }
  &:focus {
    background: $colorFocus;
    border-color: $colorFocus;
    color: #fff;
  }
}
.el-button--primary.is-plain {
  color: $color;
  border-color: $color;
  // background: #D9EBFF;

  &:hover {
    background: $colorFocus;
    border-color: $colorFocus;
  }
  &:focus {
    background: $colorFocus;
    border-color: $colorFocus;
  }
}

// 覆盖 el-steps
.el-step__head.is-finish {
  color: $color; // modify el-steps color
  border-color: $color; // modify el-steps border-color
}
.el-step__title {
  font-size: 14px;
}
.el-step__title.is-finish {
  color: $color;
}

// 覆盖 el-tag
.el-tag {
  color: $color; // modify el-tag color
  border-color: $color; // modify el-tag border-color
  background: #ecf0ff; // modify el-tag background
}
.el-tag .el-tag__close {
  color: $color;
}

// 覆盖 el-progress-bar
.el-progress-bar__inner {
  background-color: $color; // modify el-progress-bar style
}

// 覆盖 el-slider
.el-slider__bar {
  background-color: $color; // modify el-slider background-color
}
.el-slider__button {
  border-color: $color;
}

// 覆盖 el-table
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f8f8f8;
}
.el-table__body .el-table__row td {
  height: 45px;
  padding: 0;
}

// 解决表格列设置fixed后高度错误的问题
.table-fixed {
  .el-table__fixed-right {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
  .el-table__fixed {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}

// 覆盖 el-pagination
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: $color !important;
  border-radius: 4px !important;
}

/* el-upload样式 */
.el-upload {
  width: 100% !important;
}
.el-upload-dragger {
  width: 100% !important;
}

// 覆盖 el-drawer
.el-drawer__header {
  padding-bottom: 20px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #dfdfdf;
}
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #dfdfdf;
  padding: 20px;
  margin-top: 50px;

  #cancelBtn {
    color: #4a4a4a;
  }
  #confirmBtn {
    margin-left: 20px;
    color: #ffffff;
  }
}

// 覆盖 el-dialog
.el-dialog {
  border-radius: 5px;
}
// header
.el-dialog__header {
  box-sizing: border-box;
  padding: 15px 25px !important;
  font-size: 16px;
  font-weight: 500;
  background-color: #f8f8f8;
  border-bottom: 1px solid #dfdfdf;
  border-radius: 5px 5px 0px 0px;
}
// headerbtn
.el-dialog__headerbtn {
  top: 15px !important;
  right: 25px !important;
  .el-dialog__close {
    color: #4a4a4a !important;
    font-weight: 600;
  }
}
// title
.el-dialog__title {
  font-size: 16px;
  font-weight: 500;
  color: #4a4a4a;
}
// body
.el-dialog__body {
  padding: 20px 25px !important;
}
// footer
.el-dialog__footer {
  border-top: 1px solid #dfdfdf;
  padding: 20px 25px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
